<template>
  <div class="icon-subtract" :style="styles">
    <div class="icon-subtract__horizontal" :style="{ background: color }"></div>
  </div>
</template>
<script>
export default {
  props: {
    size: {
      type: Number,
      default: 40
    },
    color: {
      type: String,
      default: "#fff"
    }
  },
  computed: {
    styles() {
      return {
        width: window.lib.flexible.px2rem(this.size) + "rem",
        height: window.lib.flexible.px2rem(this.size) + "rem"
      };
    }
  }
};
</script>
<style lang="stylus">
.icon-subtract {
  display: inline-block;
  position: relative;

  .icon-subtract__horizontal {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    transform: translateY(-50%);
  }
}
</style>